<template>
	<div class="member">
    <el-form :model="searchFrom">
      <el-form-item>
        <el-input v-model="searchFrom.keyword" placeholder="会员昵称/手机号/月租服务车场/绑定车牌"></el-input>
      </el-form-item>

      <!-- <el-form-item>
        <el-select v-model="value" placeholder="选择车牌类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item>
        <el-select v-model="value" placeholder="选择车牌类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item> -->

      <!-- <el-form-item>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="注册开始日期"
          end-placeholder="注册结束日期">
        </el-date-picker>
      </el-form-item> -->

      <el-form-item>
        <el-button type="primary" @click="getTableData()">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="memberNum">
      <span class="menberNumTitle">正式会员：</span>
      <span class="menberNums">{{ vipCount }}</span> 人
    </div>

    <div class="memberNum">
      <span class="menberNumTitle">潜在会员：</span>
      <span class="menberNums">{{ notVipCount }}</span> 人
    </div>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="nickname" label="会员昵称" align="center">
      </el-table-column>
      <el-table-column prop="mobilePhone" label="手机号码" align="center">
      </el-table-column>
      <el-table-column prop="monthType" label="会员类型" align="center">
      </el-table-column>
      <el-table-column prop="createTime" label="注册时间" align="center">
      </el-table-column>
      <el-table-column prop="carNumberList" label="绑定车牌" align="center">
      </el-table-column>
      <el-table-column prop="chargeParkDuration" label="累计停车时长(时)" align="center">
      </el-table-column>
      <el-table-column prop="paidAmount" label="累计充值金额(元)" align="center">
      </el-table-column>
      <el-table-column prop="vipType" label="月租服务状态" align="center">
      </el-table-column>
      <el-table-column prop="durationCardTimeLeft" label="时长服务余额(时)" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="detailsShow = true;id=scope.row.orderId">账户详情</el-button>
        </template>
      </el-table-column>
    </el-table>
	</div>
</template>
<script>
	export default {
		name: 'member',
		data() {
			return {
        tableData: [],
        vipCount: '',
        notVipCount: '',
        searchFrom: {
          currentPage: 1,
          pageSize: 10
        }
			}
		},
		mounted() {
      this.getTableData();
      this.getMemberNum();
		},
		methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/customer/info/getCustomerPage',
          params: this.searchFrom
        }).then((res) => {
          this.tableData = res.data.records;
        })
      },
      getMemberNum() {
        this.$axios({
          method: 'get',
          url: '/customer/info/getVipCount',
        }).then((res) =>{
          if(res.code == 200) {
            this.vipCount = res.data.vipCount;
            this.notVipCount = res.data.notVipCount;
          }
        })
      }

		}
	}
</script>
<style scoped>
  .member {
    padding: 20px;
  }
  .el-form-item {
    display: inline-block;
  }
  .el-input {
    width: 300px;
  }
  .el-select {
    width: 140px;
  }
  .memberNum {
    border: 1px solid #ccc;
    display: inline-block;
    border-radius: 4px;
    padding: 10px 20px;
    background-color: #ccc;
  }
  .menberNumTitle {
    font-size: 18px;
    font-weight: bold;
  }
  .menberNums {
    color: red;
    font-size: 20px;
    font-weight: bold;
  }


</style>
